<template>
  <QueryForm
    :model="value"
    :collapsed="collapsed"
    :defaultCollapse="defaultCollapsed"
    ref="formRef"
  >
    <slot></slot>

    <FormItems v-model="value" :columns="columns" :isQueryFormItem="true">
      <template v-for="(_item, name) in itemsSlots" #[name]="slotData" :key="name">
        <slot :name="name" v-bind="slotData" />
      </template>
    </FormItems>

    <template #control="scope">
      <slot name="control" v-bind="scope">
        <el-button type="primary" @click="search">
          {{ $t('form.search') }}
        </el-button>
        <el-button @click="resetFields"> {{ $t('form.reset') }}</el-button>
      </slot>
    </template>
  </QueryForm>
</template>

<script setup>
import { QueryForm } from '@/components/form/index.js'
import { computed, defineModel, useTemplateRef } from 'vue'
import FormItems from '@/components/form/components/form-items.vue'
import { dataOmit } from '@/utils/util.js'

defineProps({
  columns: { type: Array, default: () => [] }, // 表单配置项
  collapsed: {
    // 是否折叠超出的表单项 默认折叠
    type: Boolean,
    default: true,
  },
  defaultCollapsed: {
    // 默认状态下是否折叠超出的表单项
    type: Boolean,
    default: true,
  },
  // ...其他的可以参考query-form组件的props
})

const formRef = useTemplateRef('formRef')
const emit = defineEmits(['search'])
const slots = defineSlots()
const value = defineModel()

// 表单条目下插槽
const itemsSlots = computed(() => {
  // 排除掉不需要的插槽（当前的组件其他的插槽）
  return dataOmit(['control', 'default'], slots)
})

const resetFields = () => {
  formRef?.value?.resetFields()
}

const search = () => {
  emit('search', value.value)
}

defineExpose({
  resetFields,
})
</script>

<style scoped lang="scss"></style>
